<template>
	<view class="l_k-row">
		<text :style="`display: inline-block;width:${lableWidth.replace('px','')}px;text-align:${align};align-self: flex-start;color:${lableColor}`">{{lable}} :</text>
		<view :style="`display: flex;flex: 1;flex-direction: ${direction};`">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props:{
			lable:{
				type:String,
				default:''
			},
			lableWidth:{
				type:String,
				default:'start'
			},
			align:{
				type:String,
				default:'left'
			},
			lableColor:{
				type:String,
				default:'#333'
			},
			direction:{
				type:String,
				default:'row'
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.l_k-row{
	display: flex;
	align-items: center;
	/* justify-content: flex-start; */
	font-size: 28rpx;
	width: 100%;
	background: #fff;
	
	padding: 10px 5px;
	border-top: 1px solid #F2F2F2;
}
.l_k-row>text{
	margin: 0 10px 0 0;
}
</style>
